<template>
    <div class="app-container">

        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
            <!-- 用户账单 -->
            <el-tab-pane style="color:rbg(24,144,255)" label="用户账单" name="User" v-if="false">
                <!-- 用户账单第一级 -->
                <div class="LeveOnelUser" v-if="UserLeveState == 1">

                    <div class="screen">
                        <el-cascader
                            :options="deptOptions"
                            v-model="deptId"
                            :props="{value:'id',checkStrictly: true}"
                            :show-all-levels="false"
                            placeholder="请选择部门"
                            change-on-select
                            clearable filterable
                            @change="handleChange">
                        </el-cascader>
                        <el-date-picker
                            style="margin-left:10px"
                            @change="SimeSlotChange"
                            v-model="TimeSlot"
                            type="daterange"
                            format="yyyy 年 MM 月 dd 日"
                            value-format="yyyy-MM-dd"
                            range-separator="至"
                            :clearable="false"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期">
                        </el-date-picker>
                        <el-button style="margin-left:10px" @click="LeveOneQuery" type="primary">查询</el-button>
                        <el-button style="margin-left:10px" @click="UserExport(1)" type="primary">导出</el-button>
                        <!-- <el-button style="margin-left:10px" type="primary">导出</el-button> -->
                    </div>
                    <div class="DetailedTitle" style="margin-top:20px">
                        <el-card class="box-card1" style="position: relative;">
                            <div style="position: absolute;top: 20px;
                                        left: 20px;
                                        font-size: 14px;
                                        font-weight: bold;"
                            >总金额</div>
                            <div class="title">
                                <div class="DecorationPoint"></div>
                                {{this.queryParams.startDataStr}} 到 {{this.queryParams.endDataStr}}计费为：
                            </div>
                            <div class="number" style="color:salmon;">
                                <span style="font-size : 20px;font-weight: bold;color:salmon;">{{parseInt(UsertotalMoney)}}</span>
                                元
                            </div>
                        </el-card>
                    </div>
                    <div class="UserTitle">
                        <span class="DecorationPoint" style="width: 6px;
                            height: 6px;
                            background-color:salmon;
                            border-radius: 50%;
                            margin-top: 6px;
                            margin-right: 6px;
                            display: inline-block;
                            line-height: 20px;"></span>
                        用户账单列表
                    </div>
                    <el-table
                        :data="LeveOnelUserdata"
                        v-loading="loading"
                        :header-cell-style="{color: '#FFF',background: 'rgb(24,144,255)'}"
                        style="width: 100%;font-size : 12px;margin-top:10px">
                        <el-table-column
                            prop="date"
                            label="部门名称"
                        >
                            <template slot-scope="scope">
                                <span @click="OnClickTowlevelQuery(scope.row)" style="color:rgb(24,144,255);cursor: pointer;">{{scope.row.deptName}}</span>
                            </template>
                        </el-table-column>
                        <template v-for="(item,index) in logicListALL" >
                            <el-table-column
                                :key="index"
                                :label="item.cloudSupplierName"
                            >
                                <template slot-scope="scope">
                                    {{scope.row[CaseProcess(item.cloudSupplier.toLowerCase())]?parseInt( scope.row[CaseProcess(item.cloudSupplier.toLowerCase())]) : '0'}}
                                </template>
                            </el-table-column>
                        </template>
                        <el-table-column
                            label="费用(元)"
                        >
                          <template slot-scope="scope">
                              {{parseInt(scope.row.totalMoney)}}
                          </template>
                        </el-table-column>
                    </el-table>
                    <pagination v-show="LeveOnelUsertotal>0"
                        :total="LeveOnelUsertotal"
                        :page.sync="queryParams.pageNum"
                        :limit.sync="queryParams.pageSize"
                        @pagination="LeveOneQuery"
                    />
                </div>
                <!-- 用户账单第二集 -->
                <div class="LeveTwolUser" v-if="UserLeveState == 2">
                    <div class="DetailedTitle" v-if="false">
                        <el-card class="box-card1">
                            <div class="title">
                                <div class="DecorationPoint"></div>
                                未关联业务系统的云主机数量
                            </div>
                            <div class="number">
                                <span style="font-size : 20px;font-weight: bold;">670</span>
                                台
                            </div>
                        </el-card>
                        <el-card style="margin-left:2%" class="box-card2">
                            <div class="title">
                                <div class="DecorationPoint"></div>
                                未关联业务系统的云主机费用
                            </div>
                            <div class="number">
                                <span style="font-size : 20px;font-weight: bold;">860,154.90</span>
                                元/月
                            </div>
                        </el-card>
                    </div>
                    <div class="UserTitle">
                        <span class="DecorationPoint" style="width: 6px;
                            height: 6px;
                            background-color:salmon;
                            border-radius: 50%;
                            margin-top: 6px;
                            margin-right: 6px;
                            display: inline-block;
                            line-height: 20px;"></span>
                        {{LeveTwolUserName}}
                        <el-button size="mini" @click="UserExport(2)" type="primary">导出</el-button>
                    </div>
                    <div class="screen" v-if="false">
                        <el-date-picker
                            style="margin-left:10px"
                            @change="SimeSlotChange"
                            v-model="TimeSlot"
                            type="daterange"
                            format="yyyy 年 MM 月 dd 日"
                            value-format="yyyy-MM-dd"
                            range-separator="至"
                            :clearable="false"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期">
                        </el-date-picker>
                        <el-button style="margin-left:10px" @click="ProviderrLeveOneQuery" type="primary">查询</el-button>
                        <!-- <el-button style="margin-left:10px" type="primary">导出</el-button> -->
                    </div>
                    <el-table
                        :data="LeveTwolUserdata"
                        :header-cell-style="{color: '#FFF',background: 'rgb(24,144,255)'}"
                        style="width: 100%;font-size : 12px;margin-top:10px">
                        <el-table-column
                            prop="projectName"
                            label="应用系统名称"
                        >
                            <template slot-scope="scope">
                                <span style="color:rgb(24,144,255);cursor: pointer;" @click="OnClickTheerlevelQuery(scope.row)">
                                    {{scope.row.projectName}}
                                </span>
                            </template>
                        </el-table-column>

                        <template v-for="(item,index) in logicListALL" >
                            <el-table-column
                                :key="index"
                                :label="item.cloudSupplierName"
                            >
                                <template slot-scope="scope">
                                    {{scope.row[item.cloudSupplier]?parseInt(scope.row[item.cloudSupplier]):0}}
                                </template>
                            </el-table-column>
                        </template>
                        <el-table-column
                            label="费用(元)"
                        >
                        <template slot-scope="scope">
                        {{parseInt(scope.row.totalMoney)}}
                        </template>
                        </el-table-column>
                    </el-table>
                    <pagination v-show="LeveTwolUsertotal>0"
                        :total="LeveTwolUsertotal"
                        :page.sync="UserLeveTowqueryParams.pageNum"
                        :limit.sync="UserLeveTowqueryParams.pageSize"
                        @pagination="LeveTowQuery"
                    />
                </div>
                <!-- 用户账单第三级 -->
                <div class="LeveThreelUser" v-if="UserLeveState == 3">
                    <div class="UserTitle">
                        <span class="DecorationPoint" style="width: 6px;
                            height: 6px;
                            background-color:salmon;
                            border-radius: 50%;
                            margin-top: 6px;
                            margin-right: 6px;
                            display: inline-block;
                            line-height: 20px;"></span>
                        {{LeveThreelUserName}}
                        <el-button size="mini" @click="UserExport(3)" type="primary">导出</el-button>
                    </div>
                    <el-table
                        :data="LeveThreelUserdata"
                        :header-cell-style="{color: '#FFF',background: 'rgb(24,144,255)'}"
                        style="width: 100%;font-size : 12px;margin-top:10px">
                        <el-table-column
                            label="云服务商"
                            width="100"
                        >
                            <template slot-scope="scope">
                                {{scope.row.supplierCodeName}}
                            </template>
                        </el-table-column>
                        <el-table-column
                            label="资源名称"
                        >
                            <template slot-scope="scope">
                                {{scope.row.resourceName}}
                            </template>
                        </el-table-column>
                        <el-table-column
                            prop="category"
                            label="资源类型"
                        />
                        <el-table-column
                            prop="useCount"
                            label="计量"
                        />
                        <el-table-column
                            prop="useCountUnit"
                            label="计量单位"
                        />
                        <el-table-column
                            prop="resourcePrice"
                            label="单价"
                        >
                            <template slot-scope="scope">
                                {{parseInt(scope.row.resourcePrice)}}
                            </template>
                        </el-table-column>
                        <el-table-column
                            prop="priceUnit"
                            label="单价单位"
                        />
                        <el-table-column
                            prop="totalMoney"
                            label="总价(元)"
                        >
                            <template slot-scope="scope">
                                {{parseInt(scope.row.totalMoney)}}
                            </template>
                        </el-table-column>
                    </el-table>
                    <pagination v-show="LeveThreelUsertotal>0"
                        :total="LeveThreelUsertotal"
                        :page.sync="UserLeveTheerqueryParams.pageNum"
                        :limit.sync="UserLeveTheerqueryParams.pageSize"
                        @pagination="LeveTheerQuery"
                    />
                </div>
            </el-tab-pane>
            <!-- 服务商账单 -->
            <el-tab-pane style="color:rbg(24,144,255)" label="服务商账单" name="ServiceProvider">
                <!-- 服务商账单一级 -->
                <div class="LeveOneServiceProvider" v-if="ServiceProviderLeveState == 1">
                    <div class="screen">
                        <el-date-picker
                            @change="SimeSlotChange"
                            v-model="TimeSlot"
                            type="daterange"
                            format="yyyy 年 MM 月 dd 日"
                            value-format="yyyy-MM-dd"
                            range-separator="至"
                            :clearable="false"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期">
                        </el-date-picker>
                        <el-button style="margin-left:10px" @click="ProviderrLeveOneQuery" type="primary">查询</el-button>
                        <el-button style="margin-left:10px" @click="CloudServiceProviderExport" type="primary">导出</el-button>
                    </div>
                    <div class="DetailedTitle" style="margin-top:20px">
                        <el-card class="box-card1" style="position: relative;">
                            <div style="position: absolute;top: 20px;
                                        left: 20px;
                                        font-size: 14px;
                                        font-weight: bold;"
                            >总金额</div>
                            <div class="title">
                                <div class="DecorationPoint"></div>
                                {{this.ProviderrqueryParams.startDataStr}} 到 {{this.ProviderrqueryParams.endDataStr}}计费为：
                            </div>
                            <div class="number" style="color:salmon;">
                                <span style="font-size : 20px;font-weight: bold;color:salmon;">{{parseInt(ServiceProvidertotalMoney) }}</span>
                                元
                            </div>
                        </el-card>
                    </div>
                    <div class="UserTitle">
                        <span class="DecorationPoint" style="width: 6px;
                            height: 6px;
                            background-color:salmon;
                            border-radius: 50%;
                            margin-top: 6px;
                            margin-right: 6px;
                            display: inline-block;
                            line-height: 20px;"></span>
                        服务商账单列表
                    </div>
                    <el-table
                        :data="LeveOnelServiceProviderdata"
                        :header-cell-style="{color: '#FFF',background: 'rgb(24,144,255)'}"
                        style="width: 100%;font-size : 12px;margin-top:10px">
                        <el-table-column
                            label="云服务商"
                        >
                            <template slot-scope="scope">
                                <span  @click="ProviderrOnClickTowlevelQuery(scope.row)" style="color:rgb(24,144,255);cursor: pointer;">
                                    {{scope.row.supplierName}}
                                </span>
                            </template>
                        </el-table-column>
                        <el-table-column
                            label="云服务商总收入(元)"
                        >
                            <template slot-scope="scope">
                                {{parseInt(scope.row.totalMoney)}}
                            </template>
                        </el-table-column>
                    </el-table>
                    <pagination v-show="LeveOnelServiceProvidertotal>0"
                        :total="LeveOnelServiceProvidertotal"
                        :page.sync="ProviderrqueryParams.pageNum"
                        :limit.sync="ProviderrqueryParams.pageSize"
                        @pagination="ProviderrLeveOneQuery"
                    />
                </div>
                <!-- 服务商账单二级 -->
                <div class="LeveOneServiceProvider" v-if="ServiceProviderLeveState == 2">

                    <div class="screen">
                        <el-date-picker
                            @change="SimeSlotChange"
                            v-model="TimeSlot"
                            type="daterange"
                            format="yyyy 年 MM 月 dd 日"
                            value-format="yyyy-MM-dd"
                            range-separator="至"
                            :clearable="false"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期">
                        </el-date-picker>
                        <el-button style="margin-left:10px" @click="ProviderrLeveTowQuery" type="primary">查询</el-button>
                        <el-button style="margin-left:10px" @click="CloudServiceProviderExport" type="primary">导出</el-button>
                    </div>
                    <div class="UserTitle">
                        <span class="DecorationPoint" style="width: 6px;
                            height: 6px;
                            background-color:salmon;
                            border-radius: 50%;
                            margin-top: 6px;
                            margin-right: 6px;
                            display: inline-block;
                            line-height: 20px;"></span>
                        {{LeveTwolServiceProviderName}}
                    </div>
                    <el-table
                        :data="LeveTwolServiceProviderdata"
                        :header-cell-style="{color: '#FFF',background: 'rgb(24,144,255)'}"
                        style="width: 100%;font-size : 12px;margin-top:10px">
                        <el-table-column
                            label="云服务商"
                        >
                            <template slot-scope="scope">
                                    {{scope.row.supplierName}}
                            </template>
                        </el-table-column>
                        <el-table-column
                            label="部门名称"
                        >
                            <template slot-scope="scope">
                                <span  @click="ProviderrOnClickTheerlevelQuery(scope.row)" style="color:rgb(24,144,255);cursor: pointer;">
                                    {{scope.row.deptName}}
                                </span>
                            </template>
                        </el-table-column>
                        <el-table-column
                            label="总金额(元)"
                       >
                           <template slot-scope="scope">
                              {{parseInt(scope.row.totalMoney)}}
                           </template>
                       </el-table-column>
                    </el-table>
                    <pagination v-show="LeveTwolServiceProvidertotal>0"
                        :total="LeveTwolServiceProvidertotal"
                        :page.sync="ProviderrqueryParams.pageNum"
                        :limit.sync="ProviderrqueryParams.pageSize"
                        @pagination="ProviderrLeveTowQuery"
                    />
                </div>
                <!-- 服务商账单三级 -->
                <div class="LeveOneServiceProvider" v-if="ServiceProviderLeveState == 3">
                    <div class="UserTitle">
                        <span class="DecorationPoint" style="width: 6px;
                            height: 6px;
                            background-color:salmon;
                            border-radius: 50%;
                            margin-top: 6px;
                            margin-right: 6px;
                            display: inline-block;
                            line-height: 20px;"></span>
                        {{LeveThreelServiceProviderName}}
                        <el-button size="mini" @click="CloudServiceProviderExport" type="primary">导出</el-button>
                    </div>
                    <el-table
                        :data="LeveThreelServiceProviderdata"
                        stripe
                        :header-cell-style="{color: '#FFF',background: 'rgb(24,144,255)'}"
                        style="width: 100%;font-size : 12px;margin-top:10px">
                        <el-table-column
                            prop="supplierName"
                            label="云服务商"
                        />
                        <el-table-column
                            label="部门"
                        >
                            <template slot-scope="scope">
                                {{scope.row.deptName}}
                            </template>
                        </el-table-column>
                        <el-table-column
                            prop="projectname"
                            label="系统名称"
                        >
                            <template slot-scope="scope">
                                <span  @click="ProviderrOnClickFivelevelQuery(scope.row)" style="color:rgb(24,144,255);cursor: pointer;">
                                    {{scope.row.projectName}}
                                </span>
                            </template>
                        </el-table-column>
                        <el-table-column
                            label="总金额(元)"
                       >
                           <template slot-scope="scope">
                              {{parseInt(scope.row.totalMoney)}}
                           </template>
                       </el-table-column>
                    </el-table>
                    <pagination v-show="LeveThreelServiceProvidertotal>0"
                        :total="LeveThreelServiceProvidertotal"
                        :page.sync="ProviderrqueryParams.pageNum"
                        :limit.sync="ProviderrqueryParams.pageSize"
                        @pagination="ProviderrLeveTheerQuery"
                    />
                </div>
                <!-- 服务商账单四级 -->
                <div class="LeveOneServiceProvider" v-if="ServiceProviderLeveState == 4">
                    <div class="UserTitle">
                        <span class="DecorationPoint" style="width: 6px;
                            height: 6px;
                            background-color:salmon;
                            border-radius: 50%;
                            margin-top: 6px;
                            margin-right: 6px;
                            display: inline-block;
                            line-height: 20px;"></span>
                        {{LeveFourlServiceProviderName}}
                        <el-button size="mini" @click="CloudServiceProviderExport(1)" type="primary">导出</el-button>
                    </div>
                    <el-table
                        :data="LeveFourlServiceProviderdata"
                        stripe
                        :header-cell-style="{color: '#FFF',background: 'rgb(24,144,255)'}"
                        style="width: 100%;font-size : 12px;margin-top:10px">
                        <el-table-column
                            prop="supplierCodeName"
                            label="云服务商"
                        >
                            <template slot-scope="scope">
                                {{scope.row.supplierCodeName}}
                            </template>
                        </el-table-column>
                        <el-table-column
                            label="资源名称"
                        >
                            <template slot-scope="scope">
                                {{scope.row.resourceName}}
                            </template>
                        </el-table-column>
                        <el-table-column
                            label="资源类型"
                        >
                            <template slot-scope="scope">
                                {{scope.row.category}}
                            </template>
                        </el-table-column>
                        <el-table-column
                            prop="useCount"
                            label="计量"
                        />
                        <el-table-column
                            prop="useCountUnit"
                            label="计量单位"
                        />
                        <el-table-column
                            label="单价"
                       >
                           <template slot-scope="scope">
                              {{parseInt(scope.row.resourcePrice)}}
                           </template>
                       </el-table-column>
                        <el-table-column
                            prop="priceUnit"
                            label="单价单位"
                        />
                        <el-table-column
                            prop="totalMoney"
                            label="总价"
                        >
                            <template slot-scope="scope">
                               {{parseInt(scope.row.totalMoney)}}
                            </template>
                        </el-table-column>
                    </el-table>
                    <pagination v-show="LeveFourlServiceProvidertotal>0"
                        :total="LeveFourlServiceProvidertotal"
                        :page.sync="ProviderrqueryParams.pageNum"
                        :limit.sync="ProviderrqueryParams.pageSize"
                        @pagination="ProviderrLeveFivrQuery"
                    />
                </div>
            </el-tab-pane>
            <!-- 账单列表 -->
            <el-tab-pane style="color:rbg(24,144,255)" label="账单列表" name="BillList" v-if="false">
                <!-- 账单列表一级 -->
                <div class="LeveOneServiceProvider" v-if="BillListLeveState == 1">

                    <div class="screen">
                        <el-select v-model="billqueryParams.supplier" clearable  placeholder="请选择服务商">
                            <el-option
                            v-for="item in logicListALL"
                            :key="item.value"
                            :label="item.cloudSupplierName"
                            :value="item.cloudSupplier">
                            </el-option>
                        </el-select>
                        <el-cascader
                            style="margin-left:10px"
                            :options="deptOptions"
                            v-model="deptId"
                            :props="{value:'id',checkStrictly: true}"
                            :show-all-levels="false"
                            placeholder="请选择部门"
                            change-on-select
                            clearable filterable
                            @change="handleChange">
                        </el-cascader>
                        <el-date-picker
                            style="margin-left:10px"
                            @change="SimeSlotChange"
                            v-model="TimeSlot"
                            type="daterange"
                            format="yyyy 年 MM 月 dd 日"
                            value-format="yyyy-MM-dd"
                            range-separator="至"
                            :clearable="false"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期">
                        </el-date-picker>
                        <el-button style="margin-left:10px" @click="BillLeveOneQuery" type="primary">查询</el-button>
                        <el-button style="margin-left:10px" @click="BillReport" type="primary">导出</el-button>
                    </div>
                    <div class="DetailedTitle" style="margin-top: 20px;">
                        <el-card class="box-card1" style="position: relative;">
                            <div style="position: absolute;top: 20px;
                                        left: 20px;
                                        font-size: 14px;
                                        font-weight: bold;"
                            >总金额</div>
                            <div class="title">
                                <div class="DecorationPoint"></div>
                                {{this.billqueryParams.startDataStr}}到{{this.billqueryParams.endDataStr}}计费为：
                            </div>
                            <div class="number" style="color:salmon;">
                                <span style="font-size : 20px;font-weight: bold;color:salmon;">{{parseInt(BilltotalMoney) }}</span>
                                元
                            </div>
                        </el-card>
                    </div>
                    <div class="UserTitle">
                        <span class="DecorationPoint" style="width: 6px;
                            height: 6px;
                            background-color:salmon;
                            border-radius: 50%;
                            margin-top: 6px;
                            margin-right: 6px;
                            display: inline-block;
                            line-height: 20px;"></span>
                        {{LeveOnelBillListName}}
                    </div>
                    <el-table
                        :data="LeveOnelBillListdata"
                        stripe
                        :header-cell-style="{color: '#FFF',background: 'rgb(24,144,255)'}"
                        style="width: 100%;font-size : 12px;margin-top:10px">
                        <el-table-column
                            prop="supplierName"
                            label="服务商"
                        />
                        <el-table-column
                            prop="deptName"
                            label="单位名称"
                        />
                        <el-table-column
                            prop="projectName"
                            label="应用系统"
                        >
                            <template slot-scope="scope">
                                <span @click="BillOnClickTowlevelQuery(scope.row)" style="color:rgb(24,144,255);cursor: pointer;">
                                    {{scope.row.projectName}}
                                </span>
                            </template>
                        </el-table-column>
                        <el-table-column
                            prop="totalMoney"
                            label="总金额(元)"
                        >
                            <template slot-scope="scope">
                               {{parseInt(scope.row.totalMoney)}}
                            </template>
                        </el-table-column>
                    </el-table>
                    <pagination v-show="LeveOnelBillListTotal>0"
                        :total="LeveOnelBillListTotal"
                        :page.sync="billqueryParams.pageNum"
                        :limit.sync="billqueryParams.pageSize"
                        @pagination="BillLeveOneQuery"
                    />
                </div>
                <!-- 账单列表二级 -->
                <div class="LeveOneServiceProvider" v-if="BillListLeveState == 2">
                    <div class="UserTitle">
                        <span class="DecorationPoint" style="width: 6px;
                            height: 6px;
                            background-color:salmon;
                            border-radius: 50%;
                            margin-top: 6px;
                            margin-right: 6px;
                            display: inline-block;
                            line-height: 20px;"></span>
                        {{LeveTwolBillListName}}
                        <el-button size="mini" @click="BillReport(1)" type="primary">导出</el-button>
                    </div>
                    <el-table
                        :data="LeveTwolBillListdata"
                        stripe
                        :header-cell-style="{color: '#FFF',background: 'rgb(24,144,255)'}"
                        style="width: 100%;font-size : 12px;margin-top:10px">
                        <el-table-column
                            prop="resourceName"
                            label="资源名称"
                        />
                        <el-table-column
                            prop="category"
                            label="资源类型"
                        />
                        <el-table-column
                            label="计量"
                        >
                            <template slot-scope="scope">
                                {{scope.row.useCount}}
                            </template>
                        </el-table-column>
                        <el-table-column
                            prop="useCountUnit"
                            label="计量单位"
                        />
                        <el-table-column
                            label="单价"
                        >
                            <template slot-scope="scope">
                               {{parseInt(scope.row.resourcePrice)}}
                            </template>
                        </el-table-column>
                        <el-table-column
                            prop="priceUnit"
                            label="单价单位"
                        />
                        <el-table-column
                            label="总价"
                        >
                            <template slot-scope="scope">
                               {{parseInt(scope.row.totalMoney)}}
                            </template>
                        </el-table-column>
                    </el-table>
                    <pagination v-show="LeveTwolBillListTotal>0"
                        :total="LeveTwolBillListTotal"
                        :page.sync="billqueryParams.pageNum"
                        :limit.sync="billqueryParams.pageSize"
                        @pagination="BillLeveTwoQuery"
                    />
                </div>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>
<script>
import { ecsForUser,ecsForUserByProjrct,ecsForProvider,bills,listByProject,
    exportUserBill, exportEcsForUserByProjrct,
    exportEcsForProvider,
    exportBillList
} from "@/api/chargingsForm/index";
import { treeselect } from "@/api/system/dept";
import { logicList } from "@/api/basic/services";
export default {
    name:'chargins',
    data(){
        return{
            // 加载
            loading: false,
            // 主标题选中切换
            activeName : '',
            // 表格数据
            // 用户账单表格
            LeveOnelUserdata:[],
            LeveTwolUserdata:[],
            LeveThreelUserdata:[],
            LeveOnelUserName:'',
            LeveTwolUserName:'',
            LeveThreelUserName:'',
            LeveOnelUsertotal:0,
            LeveTwolUsertotal:0,
            LeveThreelUsertotal:0,
            LeveFourlUserdata:[],
            UsertotalMoney : '',

            // 用户账单级别状态
            UserLeveState : 1,

            // 服务商账单表格
            LeveOnelServiceProviderdata:[],
            LeveTwolServiceProviderdata:[],
            LeveThreelServiceProviderdata:[],
            LeveFourlServiceProviderdata:[],
            LeveOnelServiceProvidertotal:0,
            LeveTwolServiceProvidertotal:0,
            LeveThreelServiceProvidertotal:0,
            LeveFourlServiceProvidertotal:0,
            LeveTwolServiceProviderName:'',
            LeveThreelServiceProviderName:'',
            LeveFourlServiceProviderName:'',
            ServiceProvidertotalMoney:'',

            // 服务商账单级别状态
            ServiceProviderLeveState : 1,

            // 账单列表表格
            LeveOnelBillListdata:[],
            LeveOnelBillListTotal:0,
            LeveOnelBillListName : '账单列表',
            LeveTwolBillListdata:[],
            LeveTwolBillListTotal:0,
            LeveTwolBillListName:'',
            LeveThreelBillListdata:[],
            LeveFourlBillListdata:[],
            BilltotalMoney:'',

            // 账单列表级别状态
            BillListLeveState : 1,

            // 部门
            deptId:[],
            // 查询字段
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                deptId : null,
                queryLevel:'0',
                supplier : '',
                startDataStr : '',
                endDataStr : '',
            },
            UserLeveTowqueryParams: {
                pageNum: 1,
                pageSize: 10,
                deptId : null,
                supplier : '',
                queryLevel:'1',
                startDataStr : '',
                endDataStr : '',
            },
            UserLeveTheerqueryParams: {
                pageNum: 1,
                pageSize: 10,
                queryLevel:'2',
                deptId : null,
                projectId : '',
                supplier : '',
                startDataStr : '',
                endDataStr : '',
            },


            // 云服务商查询
            ProviderrqueryParams:{
                pageNum: 1,
                pageSize: 10,
                deptId : null,
                supplier : '',
                startDataStr : '',
                endDataStr : '',
            },
            // 账单列表查询
            billqueryParams:{
                pageNum: 1,
                pageSize: 10,
                deptId : null,
                supplier : '',
                startDataStr : '',
                endDataStr : '',
            },
            // 筛选时间段
            TimeSlot: [],
            // 部门数据
            deptOptions:[],
            // 云服务商列表
            logicListALL : [],
        }
    },
    created(){
        this.activeName = 'ServiceProvider'
        // 开始时间
        var date=new Date();
        date.setDate(1);
        var startDataStr = date.getFullYear() + '-' + ((date.getMonth() + 1) > 9?(date.getMonth() + 1): '0'+(date.getMonth() + 1))  + '-' + (date.getDate() > 9? date.getDate() : '0' + date.getDate())
        this.queryParams.startDataStr = startDataStr
        this.UserLeveTowqueryParams.startDataStr = startDataStr
        this.UserLeveTheerqueryParams.startDataStr = startDataStr
        this.ProviderrqueryParams.startDataStr = startDataStr
        this.billqueryParams.startDataStr = startDataStr
        // 结束时间
        var datas =new Date();
        var endDataStr = datas.getFullYear() + '-' + ((datas.getMonth() + 1) > 9?(datas.getMonth() + 1): '0'+(datas.getMonth() + 1)) + '-' + (datas.getDate() > 9? datas.getDate() : '0' + datas.getDate())
        this.queryParams.endDataStr = endDataStr
        this.UserLeveTowqueryParams.endDataStr = endDataStr
        this.UserLeveTheerqueryParams.endDataStr = endDataStr

        this.ProviderrqueryParams.endDataStr = endDataStr
        this.billqueryParams.endDataStr = endDataStr
        this.TimeSlot = [startDataStr,endDataStr]
        this.GetQueryData()
        this.LeveOneQuery()
    },
    methods:{
        // 用户账单导出
        UserExport(num){
            if(num == 1){
                exportUserBill(this.queryParams).then(res=>{
                    this.download(res.msg);
                })
            }else if(num == 2){
                exportUserBill(this.UserLeveTowqueryParams).then(res=>{
                    this.download(res.msg);
                })
            }else if(num == 3){
                exportEcsForUserByProjrct(this.UserLeveTheerqueryParams).then(res=>{
                    this.download(res.msg);
                })
            }
        },
        // 云服务商账单导出
        CloudServiceProviderExport(num){
            if(num == 1){
                exportEcsForUserByProjrct(this.ProviderrqueryParams).then(res=>{
                    this.download(res.msg);
                    return
                })
            }else{
                exportEcsForProvider(this.ProviderrqueryParams).then(res=>{
                    this.download(res.msg);
                })
            }
        },
        // 账单列表导出
        BillReport(num){
            if(num == 1){
                exportEcsForUserByProjrct(this.billqueryParams).then(res=>{
                    this.download(res.msg);
                    return
                })
            }else{
                exportBillList(this.billqueryParams).then(res=>{
                    this.download(res.msg);
                })
            }
        },
        // 首字母大写
        CaseProcess(str){
                var arr = str.split(" ");
                arr.forEach((item, index, array) => {
                    arr[index] = item[0].toLowerCase()+ item.substring(1, item.length);
                });
                console.log(arr.join(" "))
                return arr.join(" ");
        },
        // 获取查询数据
        GetQueryData(){
            // 获取部门数据
            treeselect().then((res) => {
            this.deptOptions = res.data;
        })
            // 获取云服务商列表
            logicList().then((res)=>{
                this.logicListALL = res.rows
            })
        },

        // 账单列表一级
        BillLeveOneQuery(){
            bills(this.billqueryParams).then(res=>{
                this.BillListLeveState = 1
                this.LeveOnelBillListdata = res.rows
                this.LeveOnelBillListTotal = res.total
                this.BilltotalMoney = res.totalMoney
            })
        },
        // 账单列表二级
        BillLeveTwoQuery(){
            ecsForUserByProjrct(this.billqueryParams).then(res=>{
                this.LeveTwolBillListdata = res.rows
                this.LeveTwolBillListTotal = res.total
                this.BillListLeveState = 2
            })
        },
        // 账单列表一级到二级
        BillOnClickTowlevelQuery(item){
            this.billqueryParams.projectId = item.cloudUpId
            this.billqueryParams.deptId = Number(item.deptId)
            this.billqueryParams.supplier = item.supplierCode
            this.LeveTwolBillListName = item.supplierName+ '---'+item.deptName +'---'+item.projectName +'---'+this.billqueryParams.startDataStr+'---' + this.billqueryParams.endDataStr +  '---(按订单总量计费)账单列表'
            this.BillLeveTwoQuery()
        },

        // 云服务商一级查询
        ProviderrLeveOneQuery(){
           this.ProviderrqueryParams.queryLevel='0'
            ecsForProvider(this.ProviderrqueryParams).then(res=>{
                this.ServiceProviderLeveState = 1
                this.LeveOnelServiceProviderdata = res.rows
                this.LeveOnelServiceProvidertotal = res.total
                this.ServiceProvidertotalMoney = res.totalMoney
            })
        },
        // 云服务商二级查询
        ProviderrLeveTowQuery(){
          this.ProviderrqueryParams.queryLevel='1'
            ecsForProvider(this.ProviderrqueryParams).then(res=>{
                this.ServiceProviderLeveState = 2
                this.LeveTwolServiceProviderdata = res.rows
                this.LeveTwolServiceProvidertotal = res.total
                this.loading = false
            })
        },
        // 云服务商一级查询到二级
        ProviderrOnClickTowlevelQuery(item){
           this.ProviderrqueryParams.queryLevel='1'
            this.loading = true
            this.ProviderrqueryParams.supplier = item.supplierCode
            this.ProviderrqueryParams.isDept = 'isDept'
            this.LeveTwolServiceProviderName = item.supplierName+ '---'+this.ProviderrqueryParams.startDataStr+'---' + this.ProviderrqueryParams.endDataStr +  '---(按订单总量计费)账单列表'
            // return
            ecsForProvider(this.ProviderrqueryParams).then(res=>{
                this.ServiceProviderLeveState = 2
                this.LeveTwolServiceProviderdata = res.rows
                this.LeveTwolServiceProvidertotal = res.total
                this.loading = false
            })
        },
        // 云服务商三级查询
        ProviderrLeveTheerQuery(){
          this.ProviderrqueryParams.queryLevel='2'
            ecsForProvider(this.ProviderrqueryParams).then(res=>{
                this.ServiceProviderLeveState = 3
                this.LeveThreelServiceProviderdata = res.rows
                this.LeveThreelServiceProvidertotal = res.total
                this.loading = false
            })
        },
        // 云服务商二级查询到三级
        ProviderrOnClickTheerlevelQuery(item){
            this.ProviderrqueryParams.queryLevel='2'
            this.ProviderrqueryParams.deptId = Number(item.deptId)
            this.ProviderrqueryParams.isProject = 'isProject'
            this.LeveThreelServiceProviderName = item.supplierName+ '---'+item.deptName +'---'+this.ProviderrqueryParams.startDataStr+'---' + this.ProviderrqueryParams.endDataStr +  '---(按订单总量计费)账单列表'
            ecsForProvider(this.ProviderrqueryParams).then(res=>{
                this.ServiceProviderLeveState = 3
                this.LeveThreelServiceProviderdata = res.rows
                this.LeveThreelServiceProvidertotal = res.total
                this.loading = false
            })
        },
        // 云服务商四级查询
        ProviderrLeveFivrQuery(){
            ecsForUserByProjrct(this.ProviderrqueryParams).then(res=>{
                this.ServiceProviderLeveState = 4
                this.LeveFourlServiceProviderdata = res.rows
                this.LeveFourlServiceProvidertotal = res.total
            })
        },
        // 云服务商三级查询到四级
        ProviderrOnClickFivelevelQuery(item){
            this.ProviderrqueryParams = {
                pageNum: 1,
                pageSize: 10,
                deptId : Number(item.deptId),
                supplier : item.supplierCode,
                projectId : item.projectId,
                startDataStr : this.TimeSlot[0],
                endDataStr : this.TimeSlot[1],
            }
            this.LeveFourlServiceProviderName = item.supplierName+ '---'+item.deptName +'---'+item.projectName +'---'+this.ProviderrqueryParams.startDataStr+'---' + this.ProviderrqueryParams.endDataStr +  '---(按订单总量计费)账单列表'
            ecsForUserByProjrct(this.ProviderrqueryParams).then(res=>{
                this.ServiceProviderLeveState = 4
                this.LeveFourlServiceProviderdata = res.rows
                this.LeveFourlServiceProvidertotal = res.total
            })
        },



        // 用户账单一级查询
        LeveOneQuery(){
            this.loading = true
            ecsForUser(this.queryParams).then(res=>{
                this.LeveOnelUserdata = res.rows
                this.LeveOnelUsertotal = res.total
                this.UsertotalMoney = res.totalMoney
                this.loading = false
            })
        },
        // 用户账单一级到二级点击操作
        OnClickTowlevelQuery(item){
            this.loading = true
            this.UserLeveTowqueryParams.deptId = Number(item.deptId)
            this.UserLeveTowqueryParams.isProject = 'isProject'
            this.LeveTwolUserName = item.deptName +'---'+ this.queryParams.startDataStr+ '---'+this.queryParams.endDataStr+ '---(按订单总量计费) 应用系统账单列表'
            ecsForUser(this.UserLeveTowqueryParams).then(res=>{
                this.UserLeveState = 2
                this.LeveTwolUsertotal = res.total
                this.LeveTwolUserdata = res.rows
                this.loading = false
            })
        },
        // 用户账单二级查询
        LeveTowQuery(){
            ecsForUser(this.UserLeveTowqueryParams).then(res=>{
                this.UserLeveState = 2
                this.LeveTwolUserdata = res.rows
                this.LeveTwolUsertotal = res.total
                this.loading = false
            })
        },
        // 用户账单二级到三级点击操作
        OnClickTheerlevelQuery(item){
            console.log(item,888)
            this.loading = true
            this.UserLeveTheerqueryParams.deptId = Number(item.deptId)
            this.UserLeveTheerqueryParams.projectId = item.projectId
            this.LeveThreelUserName = item.deptName + '---' + item.projectName +'---'+ this.UserLeveTheerqueryParams.startDataStr+ '---'+this.UserLeveTheerqueryParams.endDataStr+  '---(按订单总量计费) 资源名称账单列表'
            ecsForUserByProjrct(this.UserLeveTheerqueryParams).then(res=>{
                this.UserLeveState = 3
                this.LeveThreelUsertotal = res.total
                this.LeveThreelUserdata = res.rows
                this.loading = false
            })
        },
        // 用户账单三级查询
        LeveTheerQuery(){
            ecsForUserByProjrct(this.UserLeveTheerqueryParams).then(res=>{
                this.UserLeveState = 3
                this.LeveThreelUserdata = res.rows
                this.LeveThreelUsertotal = res.total
                this.loading = false
            })
        },
        /** 转换部门数据结构 */
        serviceClazzChenge(row) {
            this.queryParams.deptId = row.id
        },
        handleChange(row){
            if(row.length == 0){
                this.queryParams.deptId = null
                this.billqueryParams.deptId = null
            }else if(row.length == 1){
                this.queryParams.deptId = row[0]
                this.billqueryParams.deptId = row[0]
            }else{
                this.queryParams.deptId = row[row.length-1]
                this.billqueryParams.deptId = row[row.length-1]
            }
        },
        ChangeUser(n){
            this.UserLeveState = n
        },
        ChangeServiceProvider(n){
            this.ServiceProviderLeveState = n
        },
        ChangeBillList(n){
            this.BillListLeveState = n
        },
        handleClick(val){
            if(val.index == 0){
                this.queryParams = {
                    pageNum: 1,
                    pageSize: 10,
                    deptId : null,
                    supplier : '',
                    queryLevel:'0',
                    startDataStr : this.TimeSlot[0],
                    endDataStr : this.TimeSlot[1],
                },
                this.UserLeveTowqueryParams = {
                    pageNum: 1,
                    pageSize: 10,
                    deptId : null,
                    supplier : '',
                    queryLevel:'1',
                    startDataStr : this.TimeSlot[0],
                    endDataStr : this.TimeSlot[1],
                },
                this.UserLeveTheerqueryParams = {
                    pageNum: 1,
                    pageSize: 10,
                    deptId : null,
                    projectId : '',
                    supplier : '',
                    queryLevel:'2',
                    startDataStr : this.TimeSlot[0],
                    endDataStr : this.TimeSlot[1],
                }
                this.UserLeveState = 1
                // this.LeveOneQuery()
            }else if(val.index == 1){
                this.ProviderrqueryParams = {
                    pageNum: 1,
                    pageSize: 10,
                    deptId : null,
                    supplier : '',
                    startDataStr : this.TimeSlot[0],
                    endDataStr : this.TimeSlot[1],
                }
                this.ServiceProviderLeveState = 1
                // this.ProviderrLeveOneQuery()
            }else if(val.index == 2){
                this.billqueryParams = {
                    pageNum: 1,
                    pageSize: 10,
                    deptId : null,
                    supplier : '',
                    startDataStr : this.TimeSlot[0],
                    endDataStr : this.TimeSlot[1],
                }
                this.BillListLeveState = 1
                // this.BillLeveOneQuery()
            }else{
                return
            }
        },
        // 时间段选值赋值
        SimeSlotChange(val){
            if(val){
                this.queryParams.startDataStr = val[0]
                this.queryParams.endDataStr = val[1]
                this.UserLeveTowqueryParams.startDataStr = val[0]
                this.UserLeveTowqueryParams.endDataStr = val[1]
                this.UserLeveTheerqueryParams.startDataStr = val[0]
                this.UserLeveTheerqueryParams.endDataStr = val[1]
                this.ProviderrqueryParams.startDataStr = val[0]
                this.ProviderrqueryParams.endDataStr = val[1]
            }else{
                this.queryParams.startDataStr = null
                this.queryParams.endDataStr = null
                this.UserLeveTowqueryParams.startDataStr = null
                this.UserLeveTowqueryParams.endDataStr = null
                this.UserLeveTheerqueryParams.startDataStr = null
                this.UserLeveTheerqueryParams.endDataStr = null
                this.ProviderrqueryParams.startDataStr = null
                this.ProviderrqueryParams.endDataStr = null
            }
        }
    }
}
</script>
<style lang="scss" scoped>
.el-table{
    color: #000;
}
    .app-container{
        // 用户账单一级
        .LeveOnelUser{
            .DetailedTitle{
                width: 80%;
                display: flex;
                height: 100px;
                .box-card1{
                    width: 46%;
                    height: 100%;
                    display: flex;
                    .title{
                        font-size: 12px;
                        margin-top: 36px;
                        // width: 50%;
                        height: 20px;
                        line-height: 20px;
                        .DecorationPoint{
                            width: 6px;
                            height: 6px;
                            background-color:rgb(105,163,240);
                            border-radius: 50%;
                            margin-top: 6px;
                            margin-right: 6px;
                            display: inline-block;
                            line-height: 20px;
                        }
                    }
                    .number{
                        text-align: right;
                        margin-top: 30px;
                        width: 50%;
                        position: absolute;
                        right: 20px;
                        top: 20px;
                    }
                }
                .box-card2{
                    width: 46%;
                    height: 100%;
                    display: flex;
                    .title{
                        font-size: 12px;
                        margin-top: 36px;
                        // width: 50%;
                        height: 20px;
                        line-height: 20px;
                        .DecorationPoint{
                            width: 6px;
                            height: 6px;
                            background-color:rgb(105,163,240);
                            border-radius: 50%;
                            margin-top: 6px;
                            margin-right: 6px;
                            display: inline-block;
                            line-height: 20px;
                        }
                    }
                    .number{
                        text-align: right;
                        margin-top: 30px;
                        width: 50%;
                        position: absolute;
                        right: 20px;
                        top: 20px;
                    }
                }
            }
            .UserTitle{
                font-size: 12px;
                font-weight: bold;
                margin: 20px 0;
            }
            .screen{
                // text-align: right;
                overflow:hidden;
            }
        }
        // 用户账单二级
        .LeveTwolUser{
            .DetailedTitle{
                width: 80%;
                display: flex;
                height: 100px;
                .box-card1{
                    width: 46%;
                    height: 100%;
                    display: flex;
                    .title{
                        font-size: 12px;
                        margin-top: 36px;
                        width: 50%;
                        height: 20px;
                        line-height: 20px;
                        .DecorationPoint{
                            width: 6px;
                            height: 6px;
                            background-color:rgb(105,163,240);
                            border-radius: 50%;
                            margin-top: 6px;
                            margin-right: 6px;
                            display: inline-block;
                            line-height: 20px;
                        }
                    }
                    .number{
                        text-align: right;
                        margin-top: 30px;
                        width: 50%;
                        position: absolute;
                        right: 20px;
                        top: 20px;
                    }
                }
                .box-card2{
                    width: 46%;
                    height: 100%;
                    display: flex;
                    .title{
                        font-size: 12px;
                        margin-top: 36px;
                        width: 50%;
                        height: 20px;
                        line-height: 20px;
                        .DecorationPoint{
                            width: 6px;
                            height: 6px;
                            background-color:rgb(105,163,240);
                            border-radius: 50%;
                            margin-top: 6px;
                            margin-right: 6px;
                            display: inline-block;
                            line-height: 20px;
                        }
                    }
                    .number{
                        text-align: right;
                        margin-top: 30px;
                        width: 50%;
                        position: absolute;
                        right: 20px;
                        top: 20px;
                    }
                }
            }
            .UserTitle{
                font-size: 12px;
                font-weight: bold;
                margin: 20px 0;
            }
            .screen{
                // text-align: right;
                overflow:hidden;
            }
        }
        // 用户账单三级
        .LeveThreelUser{
            .UserTitle{
                font-size: 12px;
                font-weight: bold;
                margin: 20px 0;
            }
        }
        // 服务商账单一级
        .LeveOneServiceProvider{
            .DetailedTitle{
                width: 80%;
                display: flex;
                height: 100px;
                .box-card1{
                    width: 46%;
                    height: 100%;
                    display: flex;
                    .title{
                        font-size: 12px;
                        margin-top: 36px;
                        // width: 50%;
                        height: 20px;
                        line-height: 20px;
                        .DecorationPoint{
                            width: 6px;
                            height: 6px;
                            background-color:rgb(105,163,240);
                            border-radius: 50%;
                            margin-top: 6px;
                            margin-right: 6px;
                            display: inline-block;
                            line-height: 20px;
                        }
                    }
                    .number{
                        text-align: right;
                        margin-top: 30px;
                        width: 50%;
                        position: absolute;
                        right: 20px;
                        top: 20px;
                    }
                }
                .box-card2{
                    width: 46%;
                    height: 100%;
                    display: flex;
                    .title{
                        font-size: 12px;
                        margin-top: 36px;
                        // width: 50%;
                        height: 20px;
                        line-height: 20px;
                        .DecorationPoint{
                            width: 6px;
                            height: 6px;
                            background-color:rgb(105,163,240);
                            border-radius: 50%;
                            margin-top: 6px;
                            margin-right: 6px;
                            display: inline-block;
                            line-height: 20px;
                        }
                    }
                    .number{
                        text-align: right;
                        margin-top: 30px;
                        width: 50%;
                        position: absolute;
                        right: 20px;
                        top: 20px;
                    }
                }
            }
            .UserTitle{
                font-size: 12px;
                font-weight: bold;
                margin: 20px 0;
            }
            .screen{
                // text-align: right;
                overflow:hidden;
            }
        }
        .el-card__body{
            width: 100%;
            display: flex;
        }
    }
</style>
